<template>
  <el-form
    :model="fm.ps"
    :ref="fm.fname"
    :inline="true"
    :label-width="'100px'"
    class="card-item">
    <el-form-item 
      :label="name" 
      prop="operPhotoUrl"
      :rules="[{required: true, message: '上传图片', trigger: 'change'}]">
      <UploadImg
        :src="fileBaseUrl+fm.ps.operPhotoUrl"
        imgName="operPhotoUrl"
        :ps="{ userName: uname }"
        url="/company/upload"
        @getImgUrl="setImgUrl"
      />
    </el-form-item>

    <el-form-item 
      label-width="0" 
      prop="nextRemindTime"
      :rules="[ { required: true, message: '下次'+name+'不能为空', trigger: 'change' } ]">
      <el-date-picker
        style="width: 140px;"
        class="date"
        v-model="fm.ps.nextRemindTime"
        type="date" clearable
        value-format="yyyy-MM-dd"
        :placeholder="'下次'+name"
        :picker-options="pickerOptions"
      />
    </el-form-item>

    <el-form-item 
      label-width="0" 
      prop="mostNewUrl"
      :rules="[ { required: true, message: '最新盖章证件', trigger: 'change' } ]">
      <UploadImg
        :src="fileBaseUrl+fm.ps.mostNewUrl"
        imgName="mostNewUrl"
        :ps="{ userName: uname }"
        url="/company/upload"
        @getImgUrl="setImgUrl"
      />
    </el-form-item>

    <el-form-item 
      label="提前" 
      label-width="60" 
      prop="nextRemindEarlyDays"
      :rules="[
        { type: 'number', message: '必须为数字' },
        { validator: fm.validateDay, trigger: 'change' },
        { required: true, message: '提前时间不能为空', trigger: 'change' },
      ]">
      <el-input 
        v-model.number="fm.ps.nextRemindEarlyDays" 
        maxlength="4" 
        placeholder="提前天数"
        style="width: 100px;margin-right:10px;">
        <b slot="suffix" class="c-bbb">天</b>  
      </el-input>

      <el-button 
        icon="el-icon-message-solid" 
        type="primary" 
        @click="handleTips">
        提醒
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import UploadImg from "@/components/UploadImg";

export default {
  name: "CardItem",
  props: ["datas", "name", "type"],
  computed: {
    ...mapGetters(["uname"]),
  },
  components: { UploadImg },
  data() {
    let validateDay = (rule, value, callback) => {
      if (value && value === "") {
        callback("提前时间不能为空");
      } else if (value < 1 || value > 500) {
        callback("提前时间范围为1-500天");
      } else {
        callback();
      }
    };

    return {
      // 文件地址前缀
      fileBaseUrl: this.C.fileBaseUrl,

      // 日期设置
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },

      fm: {
        fname: 'cardItemFm',
        validateDay,
        ps: {
          // 图片(必填)
          operPhotoUrl: "",
          // 提醒类型 (必填) 
          remindType: "", 
          // 下次提醒保养日期(必填)
          nextRemindTime: "", 
          // 下次提醒公里数 (一保二保必填)
          // nextRemindKilo: "", 
          // 下次提前提醒天数(必填)
          nextRemindEarlyDays: "", 
          // 下次提前提醒公里数(必填)(一保二保必填)
          // nextRemindEarlyKilo: "",
          // 第三者险名称 第三者险或承运人险或交强险必填) 
          // safeCompany: "", 
          // 第三者险报案电话 (第三者险或承运人险或交强险必填)
          // reportPhone: "", 
          // 行驶证或运营证年审必填
          mostNewUrl: "", 
        }
      },

    };
  },
  created() {
    if (this.datas?.length !== 0) {
      let result = this.datas?.find(it => it.remindType === this.type);
      if(result) {
        this.fm.ps = {
          // 图片(必填)
          operPhotoUrl: result.operPhotoUrl, 
          // 提醒类型 (必填)
          remindType: result.remindType, 
          // 下次提醒保养日期(必填)
          nextRemindTime: result.nextRemindTime ? result.nextRemindTime : this.$moment().format("YYYY-MM-DD"), 
          // nextRemindKilo: "",
          nextRemindEarlyDays: result.nextRemindEarlyDays,
          // nextRemindEarlyKilo: "",
          // safeCompany: "",
          // reportPhone: "",
          mostNewUrl: result.mostNewUrl,
        };
      }
    }
  },
  methods: {
    // 设置-图片
    setImgUrl(data) {
      if (data.name === "operPhotoUrl") {
        this.fm.ps.operPhotoUrl = data.url;
        this.U.clearFmVali(this, this.fm.fname, 'imoperPhotoUrlgSrc');
      }

      if (data.name === "mostNewUrl") {
        this.fm.ps.mostNewUrl = data.url;
        this.U.clearFmVali(this, this.fm.fname, 'mostNewUrl');
      }
    },
    // 处理数据
    normalizeData() {
      this.fm.ps.remindType = this.type;
      return this.fm.ps;
    },
    // 验证表单
    async validate() {
      const that = this, fm = that.fm;

      await this.$nextTick();
      let params = {
        validate: false,
        data: null,
      };

      // 只要存在一个填写 那么其他都要填
      let values = Object.values(fm.ps);
      let result = values.some(it => it);
      params.validate = result;
      if (result) {
        return new Promise((resolve, reject) => {
          this.$refs[fm.fname].validate((validate) => {
            params.validate = validate;
            params.data = this.normalizeData();
            resolve(params);
          });
        });
      } else {
        this.$refs[fm.fname].clearValidate();
        return new Promise((resolve, reject) => {
          resolve(params);
        });
      }
    },

    // 提醒
    handleTips() {
      const that = this, U = that.U;

      if (!that.fm.ps.nextRemindEarlyDays) {
        U.qwarning(`请先设置提前提醒天数`);
      }else{
        U.qwarning(`系统将会提前${that.fm.ps.nextRemindEarlyDays}天，提醒您！`);
      }
    },

  },
};
</script>
<style lang="less" scoped>
.card-item{
  .upload-img{
    width: 50px !important;
    height: 28px !important;

    ::v-deep .el-upload .avatar-uploader-icon{
      line-height: 28px !important;
    }
  }
}
</style>
